<template>
  <div class="head">
    <div class="video" @mousemove="moveimg($event)">
      <video
        src="../../../assets/video/bili.mp4"
        muted
        loop
        autoplay
        preload="auto"
        class="video-bg1"
        ref="video"
      ></video>
      <div class="bg1" ref="bg1" @mouseleave="mout">
        <img src="../../../assets/img/head/bg0.png" alt="" />
      </div>
      <div class="bg2">
        <img src="../../../assets/img/head/bg1.png" alt="" />
      </div>
    </div>
    <DaoHang></DaoHang>
    <div class="fenlei">
      <div class="fenconter">
        <div class="f1">
          <div class="f1-item">
            <div><span class="iconfont icon-shouye"></span></div>
            <span>首页</span>
          </div>
          <div class="f1-item">
            <div><img src="../../../assets/img/head/logo0.jpg" alt="" /></div>
            <span>动态</span>
          </div>
          <div class="f1-item">
            <div><span class="iconfont icon-remen"></span></div>
            <span>热门</span>
          </div>
          <div class="f1-item">
            <div><span class="iconfont icon-pindao"></span></div>
            <span>频道</span>
          </div>
        </div>
        <div class="f2">
          <ul>
            <li v-for="(item, index) in biaoqian" :key="index">
              {{ item.bt }}
              <p v-if="!item.flag">{{ item.num }}</p>
              <span v-if="item.flag" class="iconfont icon-31xiala"></span>
              <div v-if="item.tcflag" class="tanchu">
                <div class="titem">
                  <p>124124</p>
                  <p>124124</p>
                  <p>124124</p>
                  <p>124124</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="f3">
          <ul>
            <!-- <li v-for="(item, index) in biaoqian2" :key="index">
              {{ item.zt }}
              <span :class="{iconfont, icon-xxx}"></span>
            </li> -->
            <li>
              <p>专栏</p>
              <span class="iconfont icon-wenzhangshoucang"></span>
            </li>
            <li>
              <p>活动</p>
              <span class="iconfont icon-huodong-copy"></span>
            </li>
            <li>
              <p>小黑屋</p>
              <span class="iconfont icon-tianping"></span>
            </li>
            <li>
              <p>直播</p>
              <span class="iconfont icon-02f"></span>
            </li>
            <li>
              <p>课堂</p>
              <span class="iconfont icon-ketang"></span>
            </li>
            <li>
              <p>新歌热榜</p>
              <span class="iconfont icon-yinle"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DaoHang from "./daohang/daohang.vue";
export default {
  components: {
    DaoHang,
  },
  data() {
    return {
      biaoqian: [
        {
          bt: "动画",
          num: "999+",
          flag: false,
          tcflag: true,
        },
        {
          bt: "音乐",
          num: "999+",
          flag: false,
        },
        {
          bt: "舞蹈",
          num: "999+",
          flag: false,
        },
        {
          bt: "知识",
          num: "999+",
          flag: false,
        },
        {
          bt: "生活",
          num: "999+",
          flag: false,
        },
        {
          bt: "时尚",
          num: "999+",
          flag: false,
        },
        {
          bt: "娱乐",
          num: "999+",
          flag: false,
        },
        {
          bt: "放映厅",
          num: "55",
          flag: false,
        },
        {
          bt: "番剧",
          num: "105",
          flag: false,
        },
        {
          bt: "国创",
          num: "282",
          flag: false,
        },
        {
          bt: "游戏",
          num: "999+",
          flag: false,
        },
        {
          bt: "科技",
          num: "999+",
          flag: false,
        },
        {
          bt: "鬼畜",
          num: "247",
          flag: false,
        },
        {
          bt: "资讯",
          num: "233",
          flag: false,
        },
        {
          bt: "影视",
          num: "999+",
          flag: false,
        },
        {
          bt: "更多",
          num: "999+",
          flag: true,
        },
      ],
      biaoqian2: [
        {
          zt: "专栏",
          icon: "icon-wenzhangshoucang",
        },
        {
          zt: "活动",
          icon: "icon-huodong-copy",
        },
        {
          zt: "小黑屋",
          icon: "icon-tianping",
        },
        {
          zt: "直播",
          icon: "icon-02f",
        },
        {
          zt: "课堂",
          icon: "icon-ketang",
        },
        {
          zt: "新歌热榜",
          icon: "icon-yinle",
        },
      ],
      a: 0,
      shubiao: 0,
    };
  },
  methods: {
    moveimg(e) {
      if (e.clientX > this.shubiao) {
        this.a += 0.05;
        this.$refs.bg1.style.left = this.a + "px";
        this.$refs.video.style.left = this.a + "px";
        this.shubiao = e.clientX;
      } else {
        this.a -= 0.05;
        this.$refs.bg1.style.left = this.a + "px";
        this.$refs.video.style.left = this.a + "px";
        this.shubiao = e.clientX;
      }
    },
    mout() {
      this.a = 0;
      this.$refs.bg1.style.left = this.a + "px";
      this.$refs.video.style.left = this.a + "px";
    },
  },
};
</script>

<style lang="scss">
.head {
  width: 100%;
  // background-color: aquamarine;
  position: relative;
  overflow: hidden;
}
.video {
  position: relative;
  overflow: hidden;
  height: 156px;
  width: 100%;
  .video-bg1 {
    position: relative;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .bg1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    // transition: all 0.01s;
    img {
      width: 100%;
      height: 100%;
      transform: scale(1.1);
    }
  }
  .bg2 {
    position: absolute;
    top: 44%;
    left: 13%;
    img {
      height: 80px;
    }
  }
}
.fenlei {
  width: 1160px;
  height: 109px;
  margin: auto;
  // background-color: pink;
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #f4f4f4;
  .fenconter {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 68px;
    // background-color: darkgray;
    .f1 {
      flex: 1;
      // background-color: yellow;
      padding-right: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .f1-item {
        width: 50px;
        // background-color: lime;
        text-align: center;
        div {
          margin: auto;
          width: 30px;
          height: 30px;
          background-color: darkorange;
          border-radius: 50%;
          margin-bottom: 10px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            // font-weight: 700;
          }
        }
      }
      .f1-item:hover > span {
        color: #00a1d6;
        cursor: pointer;
      }
      .f1-item:nth-child(2) > div {
        background-color: #fcba2a;
      }
      .f1-item:nth-child(3) > div {
        background-color: #ff5c7c;
      }
      .f1-item:nth-child(4) > div {
        background-color: #6dc781;
      }
    }
    .f2 {
      flex: 3;
      position: relative;
      // background-color: cyan;
      ul {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        li {
          list-style: none;
          float: left;
          line-height: 36px;
          margin-right: 54px;
          position: relative;
          p {
            position: absolute;
            top: 35%;
            right: -34px;
            background-color: #73c9e5;
            color: white;
            font-size: 12px;
            text-align: center;
            width: 30px;
            line-height: 14px;
            padding: 0 1px;
            border-radius: 2px;
          }
          span {
            position: absolute;
            top: 35%;
            right: -28px;
            font-size: 14px;
            text-align: center;
            width: 30px;
            line-height: 14px;
          }
          .tanchu {
            position: absolute;
            top: -126px;
            left: -10px;
            padding: 10px;
            width: 100px;
            height: 100px;
            border-radius: 5px;
            color: white;
            background-color: yellow;
            z-index: 15;
            display: flex;
            .titem {
              flex: 1;
              display: flex;
              flex-direction: column;
              row-gap: 20px;
            }
          }
        }
        li:hover {
          color: #00a1d6;
          cursor: pointer;
        }
      }
    }
    .f2::before {
      content: "";
      width: 1px;
      height: 46px;
      position: absolute;
      background-color: #e7e7e7;
      top: 50%;
      left: 0px;
      transform: translateY(-50%);
    }
    .f2::after {
      content: "";
      width: 1px;
      height: 46px;
      position: absolute;
      background-color: #e7e7e7;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
    }
    .f3 {
      flex: 1;
      // background-color: yellow;
      ul {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        li {
          list-style: none;
          float: left;
          line-height: 36px;
          margin-left: 32px;
          position: relative;
          span {
            position: absolute;
            top: 50%;
            left: -22px;
            color: #54e2e2;
            transform: translateY(-50%);
            font-size: 18px;
          }
        }
        li:nth-child(2) > span {
          color: #f39800;
        }
        li:nth-child(3) > span {
          color: #ffd043;
        }
        li:nth-child(4) > span {
          color: #48cfe5;
        }
        li:nth-child(5) > span {
          color: #ffea85;
        }
        li:nth-child(6) > span {
          color: plum;
        }
        li:hover > p {
          color: #00a1d6;
          cursor: pointer;
        }
      }
    }
  }
}
</style>